<template>
  <div class="order">
    <div class="search">
      <!-- <van-icon name="arrow-left" class="back" @click="back" /> -->
      <van-search v-model="keyword" shape="round" show-action placeholder="搜索订单">
        <template #action>
          <div @click="onSearch" class="search_btn">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="tabs">
      <van-tabs v-model="active" @change="tabChange">
        <van-tab v-for="(v, i) in tabs" :key="i" :title="v.title" :name="v.type" />
      </van-tabs>
      <div class="list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="list.length > 0 ? '没有更多了' : ''"
            @load="onLoad">
            <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
            <orderItem v-for="(v, i) in list" :key="i" :item="v" :type="v.orderStatus || 4" @refresh="onRefresh"
              @click.native="goDetail(v)"></orderItem>
          </van-list>
          <van-empty v-if="!loading && list.length == 0" description="暂无订单" />
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import orderItem from "@/components/orderItem.vue";
import api from "@/api/api";
export default {
  components: { orderItem },
  props: {},
  data() {
    return {
      keyword: "",
      active: "",
      tabs: [
        {
          title: "全部",
          type: "",
        },
        {
          title: "待付款",
          type: 0,
        },
        {
          title: "待服务",
          type: 31,
        },
        {
          title: "已完成",
          type: 100,
        },
        {
          title: "有售后",
          type: 4,
        },
      ],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    onSearch() {
      this.active = "";
      this.onRefresh();
    },
    async onLoad() {
      await this.getOrderList();
      this.loading = false;
    },
    async onRefresh() {
      // 清空列表数据
      this.finished = false;
      this.refreshing = true;
      this.list = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.pageInfo.pageNum = 1;
      await this.onLoad();
      this.refreshing = false;
    },
    back() {
      this.$router.back();
    },
    goDetail(v) {
      this.$router.push({
        path: "/orderDetail",
        query: {
          orderSn: v.sn,
          type:this.active
        },
      });
    },
    async getOrderList() {
      let res = await api.orderList({
        ...this.pageInfo,
        goodsName: this.keyword,
        orderStatus: this.active,
      });
      this.list = [...this.list, ...res.data];
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
    },
    async getAfterSalePage() {
      let res = await api.getAfterSalePage(this.pageInfo)
      this.list = [...this.list, ...res.data];
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
      
    },
    tabChange(v) {      
      if (v == 4) {
        this.pageInfo.pageNum = 1
        this.list = []
        this.finished = false
        this.loading = true
        this.getAfterSalePage()
      } else {
        this.onRefresh();
      }
    },
  },
  created() { },
  mounted() {
    if (this.$route.query.id == -1) {
      this.active = "";
    } else {
      this.active = Number(this.$route.query.id);
    }
    if (this.active == 4) {
      this.getAfterSalePage()
    } else {
      this.onRefresh()
    }
  },
};
</script>
<style lang="less" scoped>
.order {
  min-height: 100vh;
  background: #fff;
  padding: 170px 50px 50px 50px;

  .search {
    position: fixed;
    padding: 50px;
    width: 100%;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .back {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }

    /deep/ .van-search__action {
      line-height: 50px;
    }

    .search_btn {
      padding: 20px 40px;
      border-radius: 999px;
      color: #fff;
      font-size: 44px;
      background: #1989fa;
    }

    /deep/ .van-search {
      flex-grow: 1;
      padding: 0 20px;
    }

    /deep/ .van-search__action:active {
      background-color: unset;
    }
  }

  .tabs {
    margin-top: 30px;
    margin-left: -50px;

    /deep/ .van-tab--active {
      color: #333;
      font-weight: bold;
      font-size: 50px;
    }

    /deep/ .van-tabs__line {
      background-color: #406dfc;
      width: 80px;
      bottom: 75px;
    }
  }

  .list {
    margin-top: 30px;
    padding-left: 50px;
  }
}
</style>